<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>异步带进度上传下载</title>
</head>
<body>
<form id="form1" enctype="multipart/form-data" method="post">
    <div class="row">
        <label for="fileToUpload">Select a File to Upload</label>
        <input type="file" name="fileToUpload" id="fileToUpload" onchange="fileSelected();"/>
    </div>
    <div id="fileName"></div>
    <div id="fileSize"></div>
    <div id="fileType"></div>
    <div class="row">
        <input type="button" onclick="uploadFile()" value="Upload"/>
    </div>
    <div id="progressNumber"></div>
</form>

<p></p>
<input type="button" id="download" value="下载"/>
</body>
</html>
<script type="text/javascript">
    if (!window.applicationCache) {
        alert('浏览器不支持HTML5,请使用Chrome或Firefox');
        if (window.stop)
            window.stop();
        else
            document.execCommand("Stop");
    }

    function fileSelected() {
        var file = document.getElementById('fileToUpload').files[0];
        if (file) {
            var fileSize = 0;
            if (file.size > 1024 * 1024)
                fileSize = (Math.round(file.size * 100 / (1024 * 1024)) / 100).toString() + 'MB';
            else
                fileSize = (Math.round(file.size * 100 / 1024) / 100).toString() + 'KB';

            document.getElementById('fileName').innerHTML = 'Name: ' + file.name;
            document.getElementById('fileSize').innerHTML = 'Size: ' + fileSize;
            document.getElementById('fileType').innerHTML = 'Type: ' + file.type;
        }
    }


    var uploadProgress = function (evt) {
        console.info(evt);
        if (evt.lengthComputable) {
            var percentComplete = (evt.loaded * 100 / evt.total).toFixed(2);
            document.getElementById('progressNumber').innerHTML = percentComplete + '%';
        } else {
            document.getElementById('progressNumber').innerHTML = 'unable to compute';
        }
    };
    var transferCanceled = function (evt) {
        console.info('transferCanceled', evt);
    };
    var transferFailed = function (evt) {
        console.info('transferFailed', evt);
    };
    var uploadComplete = function (evt) {
        /* This event is raised when the server send back a response */
        alert(evt.target.responseText);
    };

    function uploadFile() {
        var fd = new FormData();
        fd.append("fileToUpload", document.getElementById('fileToUpload').files[0]);
        var xhr = new XMLHttpRequest();
        xhr.upload.addEventListener("progress", uploadProgress, false);
        xhr.addEventListener("load", uploadComplete, false);
        xhr.addEventListener("error", transferFailed, false);
        xhr.addEventListener("abort", transferCanceled, false);
        xhr.open("POST", "<%=request.getContextPath()%>/UploadServlet");
        xhr.send(fd);
// 	    var formData = new FormData($('form')[0]);
// 	    $.ajax({
// 	        url: '<%=request.getContextPath()%>/UploadServlet',  //server script to process data
// 	        type: 'POST',
// 	        xhr: function() {  // custom xhr
// 	            myXhr = $.ajaxSettings.xhr();
// 	            if(myXhr.upload){ // check if upload property exists
// 	            	// for handling the progress of the upload
// 	                myXhr.upload.addEventListener('progress', uploadProgress, false);
// 	            }
// 	            return myXhr;
// 	        },
// 	        //Ajax事件
// 	        success: uploadComplete,
// 	        error: uploadFailed,
// 	        // Form数据
// 	        data: formData,
// 	        //Options to tell JQuery not to process data or worry about content-type
// 	        cache: false,
// 	        processData:false, // 告诉jQuery不要去处理发送的数据
// 	        contentType:false // 告诉jQuery不要去设置Content-Type请求头
// 	    });
    }

    var transferComplete = function (evt) {
        console.info('transferComplete', evt);
        var xhr = evt.target;
        if (xhr.status === 200) {
            var filename = xhr.getResponseHeader("Content-disposition");
            filename = filename.substring(20, filename.length);
            var blob = new Blob([xhr.response]);
            var URL = window.URL || window.webkitURL;
            var saveUrl = URL.createObjectURL(blob);
            var anchor = document.createElement('a');
            if ('download' in anchor) {
                console.info('download', saveUrl)
                anchor.style.visibility = "hidden";
                anchor.href = saveUrl;
                anchor.download = filename;
                document.body.appendChild(anchor);
                var evt = document.createEvent("MouseEvents");
                evt.initEvent("click", true, true);
                anchor.dispatchEvent(evt);
                document.body.removeChild(anchor);
            } else if (navigator.msSaveBlob) {
                console.info('msSaveBlob', saveUrl);
                navigator.msSaveBlob(blob, filename);
            } else {
                console.info('location', saveUrl);
                location.href = saveUrl;
            }
        } else {
            console.info('transferComplete error', evt);
        }
    };
    var download = function () {
        var oData = new FormData();
        oData.append("CustomField", "This is some extra data");

        var xhr = new XMLHttpRequest();
        xhr.addEventListener("progress", uploadProgress, false);
        xhr.addEventListener("load", transferComplete, false);
        xhr.addEventListener("error", transferFailed, false);
        xhr.addEventListener("abort", transferCanceled, false);
        xhr.responseType = 'blob';
        xhr.open("post", '<%=request.getContextPath()%>/DownloadServlet', true);
        xhr.send(oData);
        return false;
    };
    document.getElementById('download').addEventListener('click', download);
</script>
